<template>
  <div class="productTree-box">
    <div class="jump-box">
      <div v-if="childStatus">
        <span>{{ materialMsg.name }}</span>
        <span
          @click="btnAdd"
          v-if="addStatus"
          style="color: #1890ff; margin-left: 15px"
          >新增子件</span
        >
      </div>
      <div v-else>
        <span>{{ materialMsg.name }}</span>
        <span
          v-if="materialMsg.name !== ''"
          @click="btnView"
          style="color: #1890ff; margin-left: 15px"
          >查看子件</span
        >
      </div>
    </div>
    <div
      v-if="treeData == null"
      :style="{ width: '100%', height: maxHeight, marginTop: '10%' }"
    >
      <el-empty description="请选择物料"></el-empty>
    </div>
    <div v-else>
      <div id="productTree" :style="{ width: '100%', height: maxHeight }"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      productTree: null,
      maxHeight: "",
      materialMsg: {
        name: "",
        rdCode: "",
        workType: "",
        fmconfig: "",
      },
      // 从左到右
      left: {},
      //折线
      polyline: {},
      //子健
      childStatus: false,
      //是否显示新增
      addStatus: false,
      //子件物料编码
      invCode: "",
    };
  },
  props: {
    treeData: {
      type: Object,
      default() {
        return null;
      },
    },
    downLoadName: {
      type: String,
      default: "",
    },
    changeValue: {
      type: String,
      default: "",
    },
    fmConfig: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  mounted() {
    // 从左到右
    this.left = {
      tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
      },
      series: [
        {
          type: "tree",
          data: [this.treeData],
          top: "0%",
          left: "10%",
          bottom: "1%",
          right: "20%",
          symbolSize: 7,
          label: {
            position: "left",
            verticalAlign: "middle",
            align: "right",
            fontSize: 12,
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
      ],
    };

    //折线
    this.polyline = {
      tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
      },
      series: [
        {
          type: "tree",
          id: 0,
          name: "tree1",
          data: [this.treeData],
          top: "0%",
          left: "10%",
          bottom: "1%",
          right: "20%",
          symbolSize: 7,
          edgeShape: "polyline",
          edgeForkPosition: "63%",
          initialTreeDepth: 3,
          lineStyle: {
            width: 2,
          },
          label: {
            backgroundColor: "#fff",
            position: "left",
            verticalAlign: "middle",
            align: "right",
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
      ],
    };

    this.getTreeData().then(() => {
      if (this.treeData !== null) {
        //初始化
        if (this.changeValue == "0") {
          this.drawLine(this.left);
        }
        if (this.changeValue == "1") {
          this.drawLine(this.polyline);
        }

        window.addEventListener("resize", this.resize());
      }
    });
  },

  methods: {
    // 数据
    getTreeData() {
      return new Promise((resolve) => {
        if (this.treeData !== null) {
          this.maxHeight =
            `${document.documentElement.clientHeight}` - 225 + "px";
 
          resolve();
        } else {
          this.maxHeight =
            `${document.documentElement.clientHeight}` - 400 + "px";
          resolve();
        }
      });
    },


    // 绘图
    drawLine(option) {
      this.productTree = echarts.init(document.getElementById("productTree"));
      this.productTree.clear();
      this.productTree.on("mouseover", this.getMaterialMsg);
      this.productTree.setOption(option);
    },

    //响应式图表
    resize() {
      let self = this,
        timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          let productTree = echarts.init(
            document.getElementById("productTree")
          );
          productTree.resize();
        }, 500);
      };
    },

    //物料信息
    getMaterialMsg(params) {
      if (params.data.value !== undefined && params.data.value !== null) {
        if (params.data.children !== null) {
          this.childStatus = false;
          let value = params.data.value.split(",");
          this.materialMsg.name = "BOM：" + params.data.name;
          this.materialMsg.rdCode = value[0];
          this.materialMsg.workType = value[1];
          this.materialMsg.fmconfig = unescape(value[2]);
        } else {
          let code = params.data.name.split(" ");
          this.invCode = code[0];
          this.materialMsg.name = "BOM：" + params.data.name;
          this.materialMsg.rdCode = params.data.value;
          if (this.materialMsg.name.indexOf("采购") > -1) {
            this.addStatus = false;
          } else {
            this.addStatus = true;
          }
          this.childStatus = true;
        }
      }
    },

    //查看
    btnView() {
      this.$router.push({
        path: "/rd/develop/ebomview",
        query: {
          detailCode: this.materialMsg.rdCode,
          open: "seeStatus",
          workType: this.materialMsg.workType,
          fmConfig: this.materialMsg.fmconfig,
          fmReferer: "platform",
          timeStamp: new Date().getTime(),
        },
      });
    },

    //新增
    btnAdd() {
      if (this.fmConfig == null) {
        this.msgError("参数暂无配置");
      } else {
        this.$store.dispatch("developStatus/setInitInv", {
          code: this.invCode,
        });
        this.$router.push({
          path: "/rd/develop/ebomadd",
          query: {
            open: "addStatus",
            workType: this.fmConfig.bomType,
            fmConfig: this.fmConfig.bomConfig,
            fmReferer: "platform",
            id: new Date().getTime(),
          },
        });
      }
    },

    //截图
    btnScreen() {
      if (this.treeData !== null) {
        let code = this.productTree.getDataURL();
        const link = document.createElement("a");
        link.setAttribute("download", this.downLoadName);
        link.setAttribute("href", code);
        link.click();
      } else {
        this.msgError("请选择物料");
      }
    },

    //样式选择
    btnStyle(value) {
      if (this.treeData !== null) {
        if (value == "0") {
          this.getTreeData().then(() => {
            this.drawLine(this.left);
          });
        }
        if (value == "1") {
          this.getTreeData().then(() => {
            this.drawLine(this.polyline);
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.productTree-box {
  box-sizing: border-box;
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 20px;
}

.jump-box {
  padding-top: 20px;
  height: 45px;
  text-align: center;
  span {
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
